<template>
    <div>
        <el-form ref="form" v-loading="loading" :model="form" :rules="rules" label-width="120px" label-position="right" size="small">
            <el-row :gutter="15">
                <template>
                    <el-col :span="24">
                        <MmvTitle title="换车信息"></MmvTitle>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="订单车辆">
                            <el-input :value="orderCarName" readonly></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="更换车辆" prop="changeCar.carNo">
                            <el-input v-model="form.changeCar.carNo" placeholder="请选择车辆" readonly>
                                <el-button icon="el-icon-search" slot="append" @click="showcheliang=true"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="换回门店" prop="changeCar.storeName">
                            <el-input v-model="form.changeCar.storeName" placeholder="请选择门店" readonly>
                                <el-button icon="el-icon-search" slot="append" @click="showmendian=true"></el-button>
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label="换车时间" prop="changeCar.changeTime">
                            <el-date-picker v-model="form.changeCar.changeTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="补差价" prop="changeCar.spread">
                            <el-input v-model="form.changeCar.spread" placeholder="请输入差价"></el-input>
                        </el-form-item>
                    </el-col>
                </template>
                <template>
                    <el-col :span="24">
                        <MmvTitle title="还车验车单（订单车辆）"></MmvTitle>
                    </el-col>
                    <el-col :span="24">
                        <MmvDelivery ref="MmvDelivery2" :orderNo="orderNo" :type="2" :isEmitter="true"></MmvDelivery>
                    </el-col>
                </template>
                <template>
                    <el-col :span="24">
                        <MmvTitle title="交车验车单（更换车辆）"></MmvTitle>
                    </el-col>
                    <el-col :span="24">
                        <MmvDelivery ref="MmvDelivery1" :orderNo="orderNo" :type="1" :isEmitter="true"></MmvDelivery>
                    </el-col>
                </template>
                <el-col :span="24">
                    <el-form-item>
                        <el-button @click="$emit('close')">取消</el-button>
                        <el-button :loading="btnloadIng" type="primary" @click="submit" v-hasPermi="['order:orderBasic:delivery']">保存</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 选择门店 -->
        <MmvMendian :show="showmendian" @success="submitmendian"></MmvMendian>
        <!-- 选择车辆 -->
        <MmvSelectCar v-model="showcheliang" @success="submitcheliang"></MmvSelectCar>
    </div>
</template>

<script>
import * as orderApi from '@/api/longOrder/index'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvDelivery from './delivery.vue'
import MmvMendian from '@/views/components/selectStore.vue'
import MmvSelectCar from '@/views/components/selectCar.vue'

export default {
    name: 'chageCar',
    components: {
        MmvTitle,
        MmvDelivery,
        MmvMendian,
        MmvSelectCar,
    },
    dicts: ['delivery_type', 'car_accessories', 'charge_type'],
    props: ['orderNo', 'orderCarName'],
    data() {
        return {
            showmendian: false, // 显示门店
            showcheliang: false, // 显示车型方案
            loading: false,
            btnloadIng: false,
            form: {
                changeCar: {//基础信息
                    changeTime: null,//换车时间
                    orderNo: '',//订单编号
                    store: '',//换回门店
                    storeName: '', // 门店名称
                    carId: '',//更换车辆
                    carNo: '',
                    spread: ''//补差价
                },
                alsoCarCheck: {//还车验车
                    orderNo: '',//订单编号   必传
                    type: 2,//类型(1交车验车,2还车验车)   必传
                    fuelCapacity: 0,//车辆油量
                    vehicleMileage: 0,//公里数
                    accessoryItems: '',//车辆随车物品名称(逗号隔开)
                    remark: '',//其他描述
                    takeAlsoTime: null,//还车时间
                    bodyImage: [], //车身照片
                    panelImage: [],//仪表盘
                    interiorImage: [], //内饰照片
                    scratchImage: [],//车辆划痕
                    signImage: [], //客户签名
                    cost: [
                        {
                            deductionsFor: '',//扣款原因
                            deductionsAmount: 0//扣款金额
                        }
                    ]
                },
                carInspection: {//交车验车
                    orderNo: '',//订单编号   必传
                    type: 1,//类型(1交车验车,2还车验车)   必传
                    fuelCapacity: 0,//车辆油量
                    vehicleMileage: 0,//公里数
                    accessoryItems: '',//车辆随车物品名称(逗号隔开)
                    remark: '',//其他描述
                    takeAlsoTime: null,//取车时间
                    bodyImage: [], //车身照片
                    panelImage: [],//仪表盘
                    interiorImage: [], //内饰照片
                    scratchImage: []//车辆划痕
                }
            },
            rules: {
                'changeCar.carNo': [
                    { required: true, message: '请选择车辆' },
                ],
                'changeCar.storeName': [
                    { required: true, message: '请选择门店' },
                ],
                'changeCar.changeTime': [
                    { required: true, message: '请选择时间' },
                ],
                'changeCar.spread': [
                    { required: true, message: '请输入差价' },
                ],
            },
        }
    },
    methods: {
        /*
        |--------------------------------------------------------------------------
        | 选择门店
        |--------------------------------------------------------------------------
        */
        submitmendian(data) {
            this.showmendian = false;
            this.form.changeCar.store = data.storeId;
            this.form.changeCar.storeName = data.storeName;
        },
        /*
        |--------------------------------------------------------------------------
        | 车辆部分
        |--------------------------------------------------------------------------
        */
        submitcheliang(data) {
            this.showcheliang = false;
            this.form.changeCar.carId = data.carId
            this.form.changeCar.carNo = data.carNo
        },

        /*
        |--------------------------------------------------------------------------
        | 提交
        |--------------------------------------------------------------------------
        */
        validate() {
            return new Promise((resolve) => {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.btnloadIng = true;
                        resolve(this.formData);
                        setTimeout(() => {
                            this.btnloadIng = false;
                        }, 2e3);
                    } else {
                        this.$message.error('表单验证未通过，请检查表单内容！')
                    }
                })
            })
        },
        submit() {
            this.validate()
                .then(() => {
                    return this.$refs.MmvDelivery2.emitData();
                }).then(res => {
                    this.form.alsoCarCheck = res;
                    return this.$refs.MmvDelivery1.emitData();
                }).then(res => {
                    this.form.carInspection = res;
                    return orderApi.ChangeCar(this.form);
                }).then(response => {
                    if (response.code == 200) {
                        this.$message.success(response.msg);
                        this.$emit('close');
                    } else {
                        this.$message.error(response.msg);
                    }
                })
        },
    },
}
</script>
